<template>
	<div class="forget">
		<div class="forget-top">
			<div class="contrain">
				<div class="logo" style="position: relative; width: 300px;margin: 0 auto;">
          <img src="../../assets/img/云商蓝.png" width="100">
          <i style="position: absolute;right:10%;top: 50%">忘记密码</i>
        </div>
				<div class="back"><a @click="backlogin">返回首页</a></div>
			</div>
		</div>
		<div class="fenjie"></div>
		<div class="forget-conter">
			<div class="forget-form">
				<div class="piond">
					<p class="piond-title"><span>验证手机</span><span>重置密码</span></p>
					<p class="piond-two"><span><a>1</a></span><span><a>2</a></span></p>
				</div>
				<div class="forget-text">
					<p class="shoujiY">{{yanzhang}}</p>
					<div class="call" :class="{active:border}">
						<input @blur="Bcall" v-model="operatorPhone" @focus="border=true" placeholder="输入手机号" />
					</div>
					<p class="shoujiY">{{yanmaT}}</p>
					<div class="yanzhengma" :class="{active:Yborder}">
						<input @blur="Byan" v-model="rendCode" @focus="Yborder=true" placeholder="输入验证码" />
						<a @click="vFun_rendCode" :class="{jinyong:vue_phone_verifyBtn}" >{{vue_ver}}</a>
					</div>
					<div class="button" @click="button">
						提交
					</div>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	export default {
		data(){
			return {
				vue_phone_verifyBtn:false,
				vue_ver:'获取验证码',
				border:false,
				Yborder:false,
				yanmaT:'',						//验证码提示
				yanzhang:'',					//手机验证
				operatorPhone:'',					//手机号
				rendCode:'',					//验证码
			}
		},
		methods:{
			Bcall(){					//验证手机号
				this.border=false;
				if (this.operatorPhone=='') {
					this.yanzhang='手机号不能为空'
				}else if(this.operatorPhone!=''){
					var ostr=this.operatorPhone;
			      	var reg=/^(13[0-9]|14[57]|15[012356789]|176|177|18[012356789])\d{8}$/;
					if (reg.test(ostr) != true){
						this.yanzhang='手机号格式不正确';
					}else{
						this.yanzhang='';
					}
				}else{
					this.yanzhang=''
				}
			},
			Byan(){					//验证码
				this.Yborder=false;
				if(this.rendCode==''){
					this.yanmaT='验证码不能为空'
				}else{
					this.yanmaT=''
				}
			},
			button(){				//提交
				if (this.operatorPhone=='') {
					this.yanzhang='手机号不能为空'
					return true;
				};
				if(this.rendCode==''){
					this.yanmaT='验证码不能为空'
					return false;

				};
				this.axios({
						method:"PATCH",
						url:"/v3/system/cmembers/findPswdCheckSmsForSaas",
						params:{
							"operatorPhone":this.operatorPhone,
							"rendCode":this.rendCode,
						},
						data:{}
					}).then((res)=>{
						window.location.hash = "#/reset";
						localStorage.setItem("operatorPhone",this.operatorPhone);
					}).catch((err)=>{
						this.Public.openError(this,err.response.data);
					})



			},
			Ybutton(){
				if (this.operatorPhone=='') {
					this.yanzhang='手机号不能为空'
				}
			},
			backlogin(){				//返回首页
				window.location.hash = "#/login";
			},
			vFun_rendCode(){			//获取验证码

				if (this.operatorPhone=='') {
					this.yanzhang='手机号不能为空'
					return true;
				};

				let num = 60;
				this.vue_phone_countDown = setInterval(()=>{
					this.vue_phone_verifyBtn = true;
					this.vue_ver = num+"后重新获取";
					num--;
					if(num<=-1){
						clearInterval(this.vue_phone_countDown);
						this.vue_ver = "重新获取";
						this.vue_phone_verifyBtn = false;
					}
				},1000);
				this.axios({    			//发送验证码
						method:"PATCH",
						url:"/v3/system/cmembers/findPswdSendSmsForSaas",
						params:{
							"operatorPhone":this.operatorPhone,
						},
						data:{}
					}).then((res)=>{

					}).catch((err)=>{
						this.Public.openError(this,err.response.data);
					})
			},
		},
		mounted(){

		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
		transition: .2s;

	}
	.forget {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #f7f8fa;
	}
	.forget-top{
		height: 40%;
		background: #fff;
	}
	.logo{
		padding: 35px 0;
	}
	.logo img{
		margin: 0px auto;
	}
	.back a{
		position: absolute;
	    right: 50px;
	    top: 30px;
		line-height: 40px;
	    padding: 0 20px;
	    background-color: rgba(0,0,0,0.1);
	    color: #555;
	    font-family: Microsoft Yahei;
	    font-size: 15px;
	    border-radius: 0.3em;
	    text-decoration: none;
	    transition: .5s;
	    cursor: pointer;
	}
	.back a:hover{
		color: #fff;
		background: #888;
		transition: .5s;
	}
	.contrain{
		position: relative;
	    /*max-width: 1140px;
    	min-width: 960px;*/
    	margin: 0 auto;
    }
    .forget-conter{
    	border-top:1px solid #e9e9e9;
    }
    .piond{
    	width: 520px;
    	margin: 0 auto;
    	position: relative;
    	top: -60px;
    }
    .piond span{
    	font-size: 15px;
    	color: #03b8cc;
    	display: inline-block;
    	width: 260px;
    	text-align: center;
    }
    .piond-two a {
    	display: inline-block;
    	width: 55px;
    	height: 55px;
    	box-sizing: border-box;
    	text-align: center;
    	line-height: 53px;
    	background: #fff;
    	border-radius:50% ;
    	margin-top: 12px;
    	font-size: 30px;
    	font-family: 'Microsoft yahei';
    }
    .piond-two span:nth-child(1) a{
    	border: 1px solid #03b8cc;
    	color: #03b8cc;
    }
    .piond-two span:nth-child(2) a{
    	border: 1px solid #e9e9e9;
    	color: #aaa;
    }
    .fenjie{
    	border-top: 1px solid #03b8cc;
    	width: 50%;
    	position: relative;
    	float: left;
    }
    .forget-text{
    	width: 410px;
    	margin: 0 auto;
    	margin-top: -30px;
    	position: relative;
    }
    .forget-text > div{
    	height: 55px;
    	box-sizing: border-box;
    	border: 1px solid #e9e9e9;
    	margin-bottom: 15px;
    }
    .forget-text input{
    	height: 100%;
    	border: 0;
    	text-indent: 10px;
    	font-size: 14px;
    }
    .active{
    	border-color: #03b8cc!important;
    }
    .call input{
    	width: 100%;
    }
    .yanzhengma{
    	background: #fff;
    	position: relative;
    }
    .yanzhengma input{
    	width: 285px;
    	border-right:1px solid #e9e9e9;

    }
    .yanzhengma a{
    	text-align: center;
    	display: inline-block;
    	width: 123px;
    	height: 100%;
    	cursor: pointer;
    	color: #03b8cc;
    	font-size: 14px;
    	position: absolute;
    	top: 0;
    	right: 0;
    	line-height: 55px;
    }
    .button{
    	border: 0!important;
    	text-align: center;
    	height: 55px;
    	font-size: 20px;
    	color: #fff;
    	line-height: 55px;
    	background: #03b8cc;
    	cursor: pointer;
    	border-radius:3px ;
    	margin-top: 35px;
    }
    .shoujiY{
    	height: 20px;
    	color: #f50;
    }
    .piond-title span:nth-child(2){
    	color: #aaa;
    }
    .jinyong{
    	pointer-events: none;
    }
</style>
